Sigma Web Development

CodeWithPrashant – Lecture 11 Notes & Resources

📒 Notes for Lecture 11: Semantic Tags in HTML

  • <header> Tag: Represents the page’s header, often containing navigation.
    • Example in HTML: <header> <nav>…</nav> </header>
  • <nav> Tag: Defines a navigation section (menus or links).
    • Example: <nav> <ul><li><a href="#home">Home</a></li>…</ul> </nav>
  • <main> Tag: Wraps core content of the page.
    • Example: <main> <section id="home">…</section> <section id="about">…</section> </main>
  • <section> Tag: Groups related content into thematic blocks.
    • Example: <section id="services"> <h1>Services</h1> <p>…</p> </section>
  • <article> Tag: Denotes a self-contained piece of content (e.g., a blog post).
    • Example: <article> <h3>Article 0: Lorem</h3> <p>…</p> </article>
  • <aside> Tag: Contains content tangentially related to main content (sidebars).
    • Example: <aside> <h3>Related Articles</h3> <ul><li><a href="#">…</a></li>…</ul> </aside>
  • <footer> Tag: Represents the page footer (copyright, contact).
    • Example: <footer>Copyright CWP | 2025. All rights reserved</footer>
  • Other Semantic Tags:
    • <figure> and <figcaption> for images with captions.
    • <details> and <dialog> for collapsible sections and modals.
    • <mark> to highlight text.
    • <time> to represent dates or times.

Hinglish: Lecture 11 mein humne semantic tags use karne ka tarika dekha. <header> mein navigation rakhte hain, <main> mein core content, <section> aur <article> se related content group hota hai. <aside> sidebars ke liye hota hai, aur <footer> page ke niche ka section manage karta hai. In tags se SEO improve hota hai aur code readability bhi achi rehti hai.

💻 Live Code Preview

If the iframe doesn’t load, click here to open Lecture 11 Demo in a new tab.

📄 Semantic Tags Reference (semantic.txt)


When to Use Each Semantic Tag?
Here’s a logical order for using semantic tags in a webpage:

Start with <header>: Add the title, logo, and navigation.
Use <main>: Structure the core content with <section> and <article>.
Include <aside>: Add sidebars or related links.
Add <footer>: Include closing details like copyright or contact info.
Use <nav> and <figure> inside appropriate sections.
Use <details>, <mark>, <time>, etc., as needed.


What are Semantic Tags?
Semantic tags add meaning to your HTML. They tell both the browser and the developer what kind of content is being presented.

Here are some of the key semantic tags you must know about:

<h1>: Used to represent the top section of a web page, often containing headings, logos, and navigation.

<nav>: Signifies a navigation menu on a web page.

<article>: Indicates a self-contained piece of content, such as a blog post or news article.

<section>: Represents a thematic grouping of content on a web page.

<aside>: Typically used for sidebars or content that is tangentially related to the main content.

<footer>: Represents the footer of a web page, usually containing copyright information and contact details.

<figure> and <figcaption>: Used for embedding images, diagrams, or charts, along with a caption.

&l